<template>
  <div class="app-container" id="business">
    <div v-if="route.name=='businessList'">
      <div style="overflow:hidden">
        <el-form style="float:left">
          <el-form-item label="请选择商家:" :label-width="formLabelWidth" class="input">
            <el-select v-model="companyName"   placeholder="请选择"  @change="companyList" >
              <el-option
                v-for="item in companyOptions"
                :key="item.companyId"
                :label="item.companyNo"
                :value="item.companyName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择状态" :label-width="formLabelWidth" class="input">
            <el-select v-model="saleStatus"    placeholder="请选择"  @change="companyList" >
              <el-option label="未上架" value="0"></el-option>
              <el-option label="上架中" value="1"></el-option>
              <el-option label="已下架" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择起投金额" :label-width="formLabelWidth" class="input">
            <el-input v-model="profitOrigin" placeholder="请输入起投金额"></el-input>
          </el-form-item>
      </el-form>
        <el-button type="primary" icon="el-icon-search" style="float:left;margin-left:10px" @click="companyList">查询</el-button>
      </div>
      <div style="overflow:hidden;margin-top:20px">
        <el-button type="primary" icon="el-icon-plus" @click="addBusiness" class="button">添加商家</el-button>
      </div>
      <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row max-height="550" class="businessTable">
        <el-table-column align="center" label='商家名称' min-width="150">
          <template slot-scope="scope">
            {{scope.row.companyName}}
          </template>
        </el-table-column>
        <el-table-column label="返利起投" align="center" min-width="150">
          <template slot-scope="scope">
            {{scope.row.profitOrigin}}
          </template>
        </el-table-column>
        <el-table-column label="利率区间" align="center" min-width="150">
          <template slot-scope="scope">
            <span>{{scope.row.minYearProfit}}%~{{scope.row.maxYearProfit}}%</span>
          </template>
        </el-table-column>
        <el-table-column label="最高返利(元)" align="center" min-width="150">
          <template slot-scope="scope">
            <span>{{scope.row.maxProfit}}</span>
          </template>
        </el-table-column>
        <el-table-column label="投资用户(万人)" align="center" min-width="150">
          <template slot-scope="scope">
            <span>{{scope.row.investmentNum}}</span>
          </template>
        </el-table-column>
          <!--<el-table-column label="上下架时间" align="center">-->
          <!--<template slot-scope="scope">-->
            <!--&lt;!&ndash; <span>{{scope.row.investmentNum}}</span> &ndash;&gt;-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column label="上下架状态" align="center" min-width="150">
          <template slot-scope="scope">
            <span>{{scope.row.saleStatus===0?'未上架':scope.row.saleStatus===1?'上架中':'已下架'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="最近修改时间" align="center" min-width="200">
          <template slot-scope="scope">
            <span>{{scope.row.lastUpdated }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" min-width="300" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="changeSale(scope)">{{scope.row.saleStatus!==1?'上架':'下架'}}</el-button>
            <el-button type="info" size="mini">详情</el-button>
            <el-button type="primary" size="mini" @click="editBusiness(scope)">修改</el-button>
            <el-button type="danger" size="mini" @click="deleted(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="size">
        </el-pagination>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { companyList, companyDelete, companySale } from 'api/business'
import { companySelectList } from 'api/business'
export default {
  data() {
    return {
      profitOrigin: '',
      saleStatus: '',
      companyId: '',
      list: null,
      listLoading: true,
      companyName: '',
      label1: '',
      label2: '',
      formLabelWidth: '100px',
      size: 0,
      pageSize: 10,
      companyOptions: [],
      curPage: 1
    }
  },
  computed: {
    route() {
      return this.$route
    }
  },
  created() {
    this.getBusinessList()
    this.companyList()
  },
  methods: {
    toIntroProduct() {
      this.$router.push({ name: 'introProduct' })
    },
    toRebateProduct() {
      this.$router.push({ name: 'rebateProduct' })
    },
    // 获取商家列表
    async getBusinessList() {
      try {
        let back = await companySelectList()
        back = back.data
        if (back.resultCode === '200') {
          this.companyOptions = back.result
          this.companyId = back.result[0].companyId
          this.companyList()
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    async changeSale(scope) {
      let saleStatus = 0
      if (scope.row.approve !== 1) {
        this.$alert('该商家尚未通过审核', '提示')
        return
      }
      if (scope.row.saleStatus !== 1) {
        saleStatus = 1
      } else {
        saleStatus = 2
      }
      const parm = {
        companyId: scope.row.id,
        saleStatus: saleStatus
      }
      console.log(parm)
      try {
        let back = await companySale(parm)
        back = back.data
        if (back.resultCode === '200') {
          this.companyList()
        } else {
          this.$alert(back.msg, '提示')
        }
      } catch (err) {
        this.$alert('出错了' + err, '提示')
      }
      console.log(saleStatus)
    },
    async companyList() {
      const parm = {
        profitOrigin: this.profitOrigin,
        saleStatus: this.saleStatus,
        companyName: this.companyName,
        pageSize: this.pageSize,
        curPage: this.curPage - 1
      }
      try {
        let back = await companyList(parm)
        back = back.data
        if (back.resultCode === '200') {
          this.list = back.result
          this.size = back.size
          this.listLoading = false
        } else {
          this.$alert(back.msg)
        }
      } catch (err) {
        this.$alert('请求失败', '提示')
      }
    },
    async deleted(scope) {
      try {
        let back = await companyDelete(scope.row.id)
        back = back.data
        console.log(back)
        if (back.resultCode === '200') {
          this.companyList()
        } else {
          this.$alert(back.msg)
        }
      } catch (err) {
        this.$alert('请求失败', '提示')
      }
    },
    addBusiness() {
      this.$router.push({ name: 'addBusiness' })
    },
    editBusiness(scope) {
      sessionStorage.setItem('businessId', scope.row.id)
      this.$router.push({ name: 'editBusiness' })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.companyList()
    },
    handleCurrentChange(val) {
      this.curPage = val
      this.companyList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #business{
    .businessTable{
      margin-top:20px;
    }
    .input{
      margin: 0 10px;
      float: left;
    }
    .button{
      float: right;
      margin: 0 10px;
    }
    .block{
      float: right;
      margin-top:10px;
    }
  }
</style>
